@use "../../utils/mixins";

// Helper element for plugins:
//  - Nested Headers
//  - Nested Rows

@mixin output {
  .handsontable {
    .collapsibleIndicator {
      top: calc((var(--ht-line-height) - var(--ht-icon-size)) / 2);
      margin-inline-start: var(--ht-gap-size);
      margin-inline-end: 1px;
    }

    .collapsibleIndicator,
    .ht_nestingButton {
      position: relative;
      width: var(--ht-icon-size);
      height: var(--ht-icon-size);
      box-sizing: border-box;
      border-radius: var(--ht-collapse-button-border-radius);
      overflow: hidden;
      cursor: pointer;
      /* hide text */
      text-indent: -100px;
      font-size: 0;
      float: right;

      &::before {
        @include mixins.pseudo;

        position: absolute;
        top: 0;
        left: 0;
        transition: var(--ht-table-transition) all ease-in-out;
      }

      &.expanded,
      &.ht_nestingCollapse {
        background-color: var(--ht-collapse-button-open-background-color);
        box-shadow: 0 0 0 1px var(--ht-collapse-button-open-border-color); // border

        &::before {
          color: var(--ht-collapse-button-open-icon-color);
        }

        &:hover {
          background-color: var(
            --ht-collapse-button-open-hover-background-color
          );
          box-shadow: 0 0 0 1px
            var(--ht-collapse-button-open-hover-border-color); // border

          &::before {
            color: var(--ht-collapse-button-open-hover-icon-color);
          }
        }
      }

      &.collapsed,
      &.ht_nestingExpand {
        background-color: var(--ht-collapse-button-close-background-color);
        box-shadow: 0 0 0 1px var(--ht-collapse-button-close-border-color); // border

        &::before {
          color: var(--ht-collapse-button-close-icon-color);
        }

        &:hover {
          background-color: var(
            --ht-collapse-button-close-hover-background-color
          );
          box-shadow: 0 0 0 1px
            var(--ht-collapse-button-close-hover-border-color); // border

          &::before {
            color: var(--ht-collapse-button-close-hover-icon-color);
          }
        }
      }
    }

    th {
      &.ht__active_highlight {
        .collapsibleIndicator,
        .ht_nestingButton {
          &.collapsed,
          &.ht_nestingExpand {
            &::before {
              color: var(--ht-collapse-button-close-icon-active-color);
            }

            &:hover {
              &::before {
                color: var(--ht-collapse-button-close-hover-icon-active-color);
              }
            }
          }

          &.expanded,
          &.ht_nestingCollapse {
            &::before {
              color: var(--ht-collapse-button-open-icon-active-color);
            }

            &:hover {
              &::before {
                color: var(--ht-collapse-button-open-hover-icon-active-color);
              }
            }
          }
        }
      }
    }
  }

  [dir="rtl"].handsontable {
    .collapsibleIndicator,
    .ht_nestingButton {
      float: left;
    }
  }
}
